import React, { PureComponent } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { connect } from 'dva';
import {
  Form,
  Input,
  DatePicker,
  Select,
  Button,
  Card,
  InputNumber,
  Radio,
  Icon,
  Tooltip,
  Upload,
  Divider,
  Row,
  Col,
  Checkbox,
  Table,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './style.less';
import '../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

@connect(({ loading }) => ({
  submitting: loading.effects['form/submitRegularForm'],
}))
@Form.create()
export default class BasicForms extends PureComponent {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'form/submitRegularForm',
          payload: values,
        });
      }
    });
  };
  render() {
    const { submitting } = this.props;
    const { getFieldDecorator, getFieldValue } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    const fileList = [];

    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );

    let columnsData = [{
      a : 1,
      b : 2,
      c : 3,
      price : 10,
      number: 10,
    }];

    const columns = [{
      title: '颜色',
      dataIndex: 'a',
      key:'a',
    },{
      title: '尺寸',
      dataIndex: 'b',
      key:'b',
    },{
      title: '形状',
      dataIndex: 'c',
      key:'c',
    },{
      title: '价格',
      dataIndex: 'price',
      key:'price',
      render : (text, record) => (<Input value={record.price} style={{width:'100px'}} />)
    },{
      title: '库存',
      dataIndex: 'number',
      key:'number',
      render : (text, record) => (<Input value={record.number}  style={{width:'100px'}} />)
    }];

    return (
      <PageHeaderLayout
        title="商品管理"
        content="商品新增或修改"
      >
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label="商品名称">
              {getFieldDecorator('title', {
                rules: [
                  {
                    required: true,
                    message: '请给商品请个名字吧',
                  },
                ],
              })(<Input placeholder="给商品请个名字吧" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="商品描述">
              {getFieldDecorator('goal', {
                rules: [
                  {
                    message: '请输入对商品的描述',
                  },
                ],
              })(
                <TextArea
                  style={{ minHeight: 32 }}
                  placeholder="请输入你的阶段性工作目标"
                  rows={4}
                />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="商品图片" help="最多上传15张 规格（800*800）">
              {getFieldDecorator('picture', {
                rules: [
                  {
                    required: true,
                    message: '请上传商品图片',
                  },
                ],
              })(<Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="//jsonplaceholder.typicode.com/posts/"
               >
                {fileList.length >= 15 ? null : uploadButton}
              </Upload>)}
            </FormItem>
            <FormItem {...formItemLayout} label="商品类目">
              {getFieldDecorator('title', {
                rules: [
                  {
                    required: true,
                    message: '请给商品选个分类吧',
                  },
                ],
              })(
                <Select placeholder="请选择所属行业类目" style={{ width: '100%' }}>
                  <Option value="0">类目1</Option>
                  <Option value="1">类目2</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="商品分组">
              {getFieldDecorator('title', {
                rules: [
                  {
                    required: false,
                    message: '请给商品选个分类吧',
                  },
                ],
              })(
                <Select
                  mode="multiple"
                  style={{ width: '100%' }}
                  placeholder="Please select"
                >
                  <Option value="0">分组1</Option>
                  <Option value="1">分组2</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="主图视频" help={`建议时长9-30秒，建议视频宽高比16:9，以mp4格式为准`}>
              {getFieldDecorator('video', {
              })(
                <Upload
                  accept="video/*"
                  action=""
                >
                  <Button>
                    <Icon type="upload" /> 点击上传
                  </Button>
                </Upload>
              )}
            </FormItem>
            <Divider></Divider>
            <FormItem {...formItemLayout} label="商品规格">
              <Row gutter={8}>
                <Col span={3}>规格名：</Col>
                <Col span={5}><Input></Input><Icon type="close-circle-o" className={styles.delIcon} /></Col>
                <Col span={6}><Checkbox>显示规格图片</Checkbox></Col>
              </Row>
              <Row gutter={8}>
                <Col span={3}>规格值：</Col>
                <Col span={5}>
                    <Input></Input><Icon type="close-circle-o" className={styles.delIcon} />
                    <Upload
                      name="rule"
                      listType="picture-card"
                      className="avatar-uploader"
                      showUploadList={false}
                      action="//jsonplaceholder.typicode.com/posts/"
                    >
                      <div>
                        <Icon type="plus" />
                        <div className="ant-upload-text">Upload</div>
                      </div>
                    </Upload>
                </Col>
                <Col span={5}>
                  <Input></Input><Icon type="close-circle-o" className={styles.delIcon} />
                  <Upload
                    name="rule"
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    action="//jsonplaceholder.typicode.com/posts/"
                  >
                    <div>
                      <Icon type="plus" />
                      <div className="ant-upload-text">Upload</div>
                    </div>
                  </Upload>
                </Col>
                <Col span={6}><a ><Icon type="plus-circle-o" /> 添加规格值</a></Col>
              </Row>
              <Divider></Divider>
              <Row gutter={8}>
                <Col span={3}>规格名：</Col>
                <Col span={5}><Input></Input><Icon type="close-circle-o" className={styles.delIcon} /></Col>
              </Row>
              <Row gutter={8}>
                <Col span={3}>规格值：</Col>
                <Col span={5}>
                  <Input></Input><Icon type="close-circle-o" className={styles.delIcon} />
                </Col>
                <Col span={5}>
                  <Input></Input><Icon type="close-circle-o" className={styles.delIcon} />
                </Col>
                <Col span={6}><a ><Icon type="plus-circle-o" /> 添加规格值</a></Col>
              </Row>
              <Divider></Divider>
              <Row gutter={8}>
                <Col span={3}>规格名：</Col>
                <Col span={5}><Input></Input><Icon type="close-circle-o" className={styles.delIcon} /></Col>
              </Row>
              <Row gutter={8}>
                <Col span={3}>规格值：</Col>
                <Col span={5}>
                  <Input></Input><Icon type="close-circle-o" className={styles.delIcon} />
                </Col>
                <Col span={5}>
                  <Input></Input><Icon type="close-circle-o" className={styles.delIcon} />
                </Col>
                <Col span={6}><a ><Icon type="plus-circle-o" /> 添加规格值</a></Col>
              </Row>
              <Divider></Divider>
              <Button>添加</Button>
            </FormItem>
            <FormItem {...formItemLayout} label="规格明细">
                <Table bordered dataSource={columnsData} columns={columns} pagination={false}></Table>
                <Row gutter={8}>
                  <Col span={5}><a><Icon type="edit" /> 批量设置价格</a></Col>
                  <Col span={5}><a><Icon type="edit" /> 批量设置库存</a></Col>
                  <Col span={5}><Input></Input></Col>
                  <Col span={3}><Button>设置</Button></Col>
                  <Col span={3}><Button>取消</Button></Col>

                </Row>
            </FormItem>
            <FormItem {...formItemLayout} label="价格">
              {getFieldDecorator('price', {
                rules: [
                  {
                    required: true,
                    message: '请填写统一商品价格',
                  },
                ],
              })(<Input placeholder="统一商品价格"></Input>)}
            </FormItem>
            <FormItem {...formItemLayout} label="划线价">
              {getFieldDecorator('line-price', {
              })(<Input placeholder="商品划线价格"></Input>)}
            </FormItem>
            <FormItem {...formItemLayout} label="库存">
              {getFieldDecorator('price', {
                rules: [
                  {
                    required: true,
                    message: '请填写商品库存',
                  },
                ],
              })(<Input placeholder="0"></Input>)}
            </FormItem>
            <FormItem {...formItemLayout} label="快递运费">
              {getFieldDecorator('price', {
                rules: [
                  {
                    required: true,
                    message: '请填写快递运费',
                  },
                ],
              })(<Input placeholder="0"></Input>)}
            </FormItem>
            <FormItem {...formItemLayout} label="划线价">
              {getFieldDecorator('price', {
                rules: [
                  {
                    required: true,
                    message: '请填写快递运费',
                  },
                ],
              })(<Input placeholder="0"></Input>)}
            </FormItem>
            <FormItem {...formItemLayout} label="上架时间">
              {
                getFieldDecorator('public', {
                  initialValue: '1',
                })(
                  <Radio.Group>
                    <Radio value="1">立即上架</Radio>
                    <Radio value="2">暂不售卖，放入仓库</Radio>
                  </Radio.Group>
                )
              }
            </FormItem>
            <Divider />
            <FormItem {...formItemLayout} label="规格参数">
              <Row gutter={8}>
                <Col span="6"><Input placeholder="参数名"></Input></Col>
                <Col span="1">--</Col>
                <Col span="10"><Input placeholder="参数值"></Input></Col>
                <Col span="1"><Icon type="close-circle-o" /></Col>
              </Row>
              <Row gutter={8}>
                <Col span="6"><Input placeholder="参数名"></Input></Col>
                <Col span="1">--</Col>
                <Col span="10"><Input placeholder="参数值"></Input></Col>
                <Col span="1"><Icon type="close-circle-o" /></Col>
              </Row>
              <Row gutter={8}>
                <Col span="6"><Input placeholder="参数名"></Input></Col>
                <Col span="1">--</Col>
                <Col span="10"><Input placeholder="参数值"></Input></Col>
                <Col span="1"><Icon type="close-circle-o" /></Col>
              </Row>
              <Row gutter={8}>
                <Col span="6"><Input placeholder="参数名"></Input></Col>
                <Col span="1">--</Col>
                <Col span="10"><Input placeholder="参数值"></Input></Col>
                <Col span="1"><Icon type="close-circle-o" /></Col>
              </Row>
              <Button>添加</Button>
            </FormItem>
            <FormItem {...formItemLayout} label="详情">
              <Editor
                editorClassName="home-editor"
              />
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                提交
              </Button>
              <Button style={{ marginLeft: 8 }}>保存</Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
